<template>
    <div class="m-style have-nav">
        <blockIndexNavBar title="客户列表"></blockIndexNavBar>

        <div v-show="'list' === model">
            <van-row class="title-search">
                <van-col span="16">
                    <van-search
                        v-model="CUS_NAME"
                        placeholder="请输入客户名"
                        @search="onSearch"
                    >
                    </van-search>
                </van-col>
                <van-col span="8" class="title-search-btn-group">
                    <van-button @click="onSearch">搜索</van-button>
                    <van-button @click="model = 'search'">高级</van-button>
                </van-col>
            </van-row>

            <m_pageList
                ref="pageList"
                :url="url"
                :cols="cols"
                :list-cond="listCond"
                @toDetail="toDetail"
            >
                <template v-slot="scope">
                    <strong>{{ scope.row.CUS_ID }}</strong>
                </template>
            </m_pageList>

        </div>
        <div v-show="'search' === model">
            <search @submit="onHighSearch"></search>
        </div>

    </div>

</template>
<script>
import search from "./search";
import {API_URL, HREF_URL} from "@/config/urlInfo";
import blockIndexNavBar from "@/components/blockIndexNavBar";
import {enumClientType} from "@/config/enumData";
import m_pageList from "@/uitl/m_pageList";

export default {
    components: {
        search,
        blockIndexNavBar,
        m_pageList
    },
    data: function () {
        return {
            url: API_URL.xCusList,
            cols: {
                show: [
                    {title: '客户名称', field: 'CUS_NAME'},
                    {title: '联系电话', field: 'PHONE'},
                    {title: '开户证件类型', field: 'CERT_TYPE'},
                    {title: '开户证件号码', field: 'CERT_CODE'}
                ],
                hide: [
                    {title: '通讯地址', field: 'POST_ADDR'},
                    {title: '开户证件号码', field: 'CERT_CODE'},
                    {title: '联系人', field: 'CONTACT_NAME'},
                    {title: '主管客户经理', field: 'CUST_MGR'},
                    {title: '主管机构', field: 'MAIN_BR_ID'}
                ]
            },
            CUS_NAME: "",
            model: "list",
            show: true,
            loading: false,
            listCond: {}
        }
    },
    mounted() {
    },
    methods: {
        toDetail(item) {
            let cusId = item.CUS_ID;
            let cusType = item.SOURCE_CUS_TYPE;
            if (cusType.charAt(0) == enumClientType.private) {
                this.$router.push({
                    path: HREF_URL.xCusIndivDtl.format(cusId)
                });
            } else {
                this.$router.push({
                    path: HREF_URL.xCusComDtl.format(cusId)
                });
            }
        },
        onSearch() {
            this.listCond = {
                CUS_NAME: this.CUS_NAME
            };
        },
        onHighSearch(data) {
            this.model = "list";
            if (data === "cancel") {
                return
            }

            data.own = data.own === true ? '1' : '';
            this.listCond = data;
            this.CUS_NAME = data["CUS_NAME"] || "";
        }
    }
}
</script>